<template>
  <div class="relative"
  @mouseenter="stopLoop"
  @mouseleave="startLoop"
  >
    <div class="until_title" v-if="sitePage === 1" style="letter-spacing: 1px">项目分布</div>
    <div class="until_title" v-else-if="sitePage === 2" style="letter-spacing: 1px">今日进场劳务人员分布</div>
    <div class="until_title" v-else-if="sitePage === 3" style="letter-spacing: 1px">今日在线设备数量分布</div>
    <div class="until_title" v-else style="letter-spacing: 1px">今日实时报警数量分布</div>
    <div class="site_container">
      <transition-group
        name="list"
        tag="div"
        class="scroll"
      >
        <div v-show="sitePage === 1" :key="1">
          <div class="absolute " style="top: 0px;left: 12%;display: flex;width: 500px;justify-content: space-around;">
            <gauge :percent="((totalData.coverDepartmentNum / totalData.departmentAllNum) || 0).toFixed(3)" :detailNum="totalData.coverDepartmentNum" colorType="1" :chartName="gaugeName"></gauge>
            <gauge chartName="覆盖项目" :percent="((totalData.coverProjectNum / totalData.projectAllNum) || 0).toFixed(3)" :detailNum="totalData.coverProjectNum" colorType="2"></gauge>
          </div>
          <div class="projectMap" style="padding-top: 70px">
            <projectMap></projectMap>
          </div>
        </div>
        <div v-show="sitePage === 2" :key="2">
          <proBubble :provinceList="arrayUnique2(laborInfo.province, 'name')" :cityList="arrayUnique2(laborInfo.city, 'name')" colorType="#01e9ff"></proBubble>
        </div>
        <div v-show="sitePage === 3" :key="3">
          <proBubble :provinceList="arrayUnique2(deviceOnlineInfo.province, 'name')" :cityList="arrayUnique2(deviceOnlineInfo.city, 'name')" colorType="#80d941"></proBubble>
        </div>
        <div v-show="sitePage === 4" :key="4">
          <proBubble :provinceList="arrayUnique2(alarmInfo.province, 'name')" :cityList="arrayUnique2(alarmInfo.city, 'name')" colorType="#ffd52c"></proBubble>
        </div>
      </transition-group>
      <div class="count">
        <countData @dataEmit="getDataEmit"></countData>
      </div>
      <div class="line absolute turn_left" style="left: 0px" @click="turnLeft" :class="{opacity: opacity}">
        <i class="iconfont icon-t-arrow"></i>
      </div>
      <div class="line absolute turn_right" style="right: 0px;" @click="turnRight" :class="{opacity: opacity}">
        <i class="iconfont icon-r-arrow"></i>
      </div>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
      name: 'site',
      data () {
        return {
          sitePage: 1,
          siteTime: null,
          opacity: false,
          gaugeName: '覆盖区域',
          laborInfo: {
            province: [],
            city: []
          },
          deviceOnlineInfo: {
            province: [],
            city: []
          },
          alarmInfo: {
            province: [],
            city: []
          },
          totalData: {
            coverDepartmentNum: 0,
            coverProjectNum: 0,
            departmentAllNum: 0,
            projectAllNum: 0,
            ssgfProjectNum: 0
          }
        }
      },
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
        })
      },
      components: {
        gauge (resolve) {
          require(['./gauge.vue'], resolve)
        },
        projectMap (resolve) {
          require(['./projectMap.vue'], resolve)
        },
        countData (resolve) {
          require(['./countData.vue'], resolve)
        },
        proBubble (resolve) {
          require(['./projectBubble.vue'], resolve)
        }
      },
      watch: {
        currentUser (newValue) {
          if (this.currentUser.companyAdmin) {
            clearInterval(this.siteTime)
            this.initLoop()
            this.getLaborAttendanceInfo()
            this.getDeviceOnlineInfo()
            this.getAlarmInfo()
            this.getConstructionInfo()
            if (newValue.departmentId === '') {
              this.gaugeName = '覆盖区域'
            } else {
              this.gaugeName = '覆盖城市'
            }
          }
        }
      },
      mounted () {
        this.initLoop()
        this.getLaborAttendanceInfo()
        this.getDeviceOnlineInfo()
        this.getAlarmInfo()
        this.getConstructionInfo()
        if (this.currentUser.departmentId === '') {
          this.gaugeName = '覆盖区域'
        } else {
          this.gaugeName = '覆盖城市'
        }
      },
      methods: {
        // 轮播逻辑start
        initLoop () {
          this.siteTime = setInterval(() => {
            this.sitePage++
            if (this.sitePage > 4) {
              this.sitePage = 1
            }
          }, 1000 * 30)
        },
        turnRight () {
          this.sitePage++
          if (this.sitePage > 4) {
            this.sitePage = 1
          }
        },
        turnLeft () {
          this.sitePage--
          if (this.sitePage < 1) {
            this.sitePage = 4
          }
        },
        stopLoop () {
          this.opacity = true
          clearInterval(this.siteTime)
        },
        startLoop () {
          this.opacity = false
          this.initLoop()
        },
        // 轮播逻辑end
        // 今日进场劳务人员分布图Start
        getLaborAttendanceInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getLaborAttendanceInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            let data = res.data.data
            this.laborInfo.province = []
            this.laborInfo.city = []
            // 没有省市根据经纬度筛选出省市
            let baiduPromise = []
            data.forEach((item, index) => {
              baiduPromise.push(this.getBaiduProvinceAndCity(item))
            })
            Promise.all(baiduPromise).then(res => {
              // 循环数据筛选出省市
              data.forEach((item) => {
                if (this.laborInfo.city.length > 0) {
                  (this.laborInfo.city).forEach((val) => {
                    if (val.name === item.city) {
                      val.value = val.value + item.attendanceNum
                    } else {
                      this.laborInfo.city.push(
                        {
                          name: item.city,
                          value: item.attendanceNum
                        }
                      )
                    }
                  })
                } else {
                  this.laborInfo.city.push(
                    {
                      name: item.city,
                      value: item.attendanceNum
                    }
                  )
                }
              })
              data.forEach((item) => {
                if (this.laborInfo.province.length > 0) {
                  (this.laborInfo.province).forEach((val) => {
                    if (val.name === item.province) {
                      val.value = val.value + item.attendanceNum
                    } else {
                      this.laborInfo.province.push(
                        {
                          name: item.province,
                          value: item.attendanceNum
                        }
                      )
                    }
                  })
                } else {
                  this.laborInfo.province.push(
                    {
                      name: item.province,
                      value: item.attendanceNum
                    }
                  )
                }
              })
            })
          })
        },
        // 今日在线设备分布图
        getDeviceOnlineInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getDeviceOnlineInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            console.log(res)
            let data = res.data.data
            this.deviceOnlineInfo.province = []
            this.deviceOnlineInfo.city = []
            let baiduPromise = []
            data.forEach((item, index) => {
              baiduPromise.push(this.getBaiduProvinceAndCity(item))
            })
            Promise.all(baiduPromise).then(res => {
              data.forEach((item) => {
                if (this.deviceOnlineInfo.city.length > 0) {
                  (this.deviceOnlineInfo.city).forEach((val) => {
                    if (val.name === item.city) {
                      val.value = val.value + item.deviceOnlineNum
                    } else {
                      this.deviceOnlineInfo.city.push(
                        {
                          name: item.city,
                          value: item.deviceOnlineNum
                        }
                      )
                    }
                  })
                } else {
                  this.deviceOnlineInfo.city.push(
                    {
                      name: item.city,
                      value: item.deviceOnlineNum
                    }
                  )
                }
              })
              data.forEach((item) => {
                if (this.deviceOnlineInfo.province.length > 0) {
                  (this.deviceOnlineInfo.province).forEach((val) => {
                    if (val.name === item.province) {
                      val.value = val.value + item.deviceOnlineNum
                    } else {
                      this.deviceOnlineInfo.province.push(
                        {
                          name: item.province,
                          value: item.deviceOnlineNum
                        }
                      )
                    }
                  })
                } else {
                  this.deviceOnlineInfo.province.push(
                    {
                      name: item.province,
                      value: item.deviceOnlineNum
                    }
                  )
                }
              })
            })
          })
        },
        // 今日报警次数分布图
        getAlarmInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getAlarmInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            let data = res.data.data
            this.alarmInfo.province = []
            this.alarmInfo.city = []
            let baiduPromise = []
            data.forEach((item, index) => {
              baiduPromise.push(this.getBaiduProvinceAndCity(item))
            })
            Promise.all(baiduPromise).then(res => {
              data.forEach((item) => {
                if (this.alarmInfo.city.length > 0) {
                  (this.alarmInfo.city).forEach((val) => {
                    if (val.name === item.city) {
                      val.value = val.value + item.alarmNum
                    } else {
                      this.alarmInfo.city.push(
                        {
                          name: item.city,
                          value: item.alarmNum
                        }
                      )
                    }
                  })
                } else {
                  this.alarmInfo.city.push(
                    {
                      name: item.city,
                      value: item.alarmNum
                    }
                  )
                }
              })
              data.forEach((item) => {
                if (this.alarmInfo.province.length > 0) {
                  (this.alarmInfo.province).forEach((val) => {
                    if (val.name === item.province) {
                      val.value = val.value + item.alarmNum
                    } else {
                      this.alarmInfo.province.push(
                        {
                          name: item.province,
                          value: item.alarmNum
                        }
                      )
                    }
                  })
                } else {
                  this.alarmInfo.province.push(
                    {
                      name: item.province,
                      value: item.alarmNum
                    }
                  )
                }
              })
            })
          })
        },
        // 智慧工地统计
        getConstructionInfo () {
          let data = {
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getConstructionInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            console.log(res)
            let data = res.data.data
            this.totalData.coverDepartmentNum = data.coverDepartmentNum
            this.totalData.coverProjectNum = data.coverProjectNum
            this.totalData.departmentAllNum = data.departmentAllNum
            this.totalData.projectAllNum = data.projectAllNum
          })
        },
        // 推送数据地图变化
        getDataEmit (type) {
          if (type === 5 || type === 6) {
            this.getLaborAttendanceInfo()
          }
          if (type === 3) {
            this.getAlarmInfo()
          }
          if (type === 2 || type === 4) {
            this.getDeviceOnlineInfo()
          }
        },
        // 百度api获取省市
        getBaiduProvinceAndCity (item) {
          return new Promise(resolve => {
            if (item.province === null || item.city === null) {
              if (item.baiduLng && item.baiduLat) {
                this.$jsonp(`https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=${item.baiduLat},${item.baiduLng}&output=json&pois=1&ak&output=json&ak=MErGAwKAYaNnw8jTxTX0hYyscdcdH8Rl`,
                ).then(json => {
                  if (json.result) {
                    const {city, province} = json.result.addressComponent
                    item.city = city
                    item.province = province
                    resolve()
                  }
                })
              } else {
                resolve()
              }
            } else {
              resolve()
            }
          })
        },
        // 数组去重
        arrayUnique2 (arr, name) {
          let hash = {}
          return arr.reduce(function (item, next) {
            hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
            return item
          }, [])
        }
      }
    }
</script>

<style scoped lang="scss">
  .site_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 20px;
    .count {
      width: 25%;
    }
  }

  .line {
    width: 25px;
    height: 100px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,.5);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px;
    opacity: 0;
    transition: opacity 1s;
  }

  .list-enter-to {
    transition: all 1s ease;
    transform: translateX(0);
  }
  .list-leave-active {
    transition: all 1s ease;
    transform: translateX(-100%)
  }
  .list-enter {
    transform: translateX(100%)
  }
  .list-leave {
    transform: translateX(0)
  }

  .scroll{
    width: 75%;
    overflow: hidden;
    position: relative;
    >div{
      width: 100%;
      position: absolute;
      &:nth-child(n+2) {
        padding-top: 25px;
      }
    }
  }
  .opacity{
    opacity: 1;
  }
</style>
